<template>
  <div id="app">
    <div class="nav_header">
      <div @click="active = 'Watermark'">实战</div>
      <div @click="active = 'TextAdd'">编辑文字</div>
      <div @click="active = 'HelloWorld'">基础</div>
    </div>
    <component :is="active"></component>
  </div>
</template>

<script>
import HelloWorld from '@/views/HelloWorld'
import TextAdd from '@/views/TextAdd'
import Watermark from '@/views/watermark/Watermark'

export default {
  name: 'App',
  components: {
    HelloWorld, TextAdd, Watermark
  },
  data () {
    return {
      active: 'Watermark'
    }
  },
}
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  color: #2c3e50;
  background-color: rgba(0, 0, 0, 0.1);
  height: 100%;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}
.nav_header {
  display: flex;
  justify-content: center;
  div {
    cursor: pointer;
    margin: 10px;
    color: #56f;
    border-bottom: 1px solid #56f;
  }
}
</style>
